✨ Serialize current video frame into a `poster` on the `<video>` #794

Robdel12 · 2022-02-24T17:22:23Z

What is this?

Capturing videos via request interception can be tricky and highly depends on the customers server that's serving the video. Percy's infrastructure will also not play videos for screenshots so it doesn't make too much sense to capture & store large resources like videos.

This feature will capture the current frame of the videos on page and turn them into a poster image for the video. This is so there's something to display on the <video> element when capturing a screenshot in Percy's browsers.

It's possible for this to introduce flakes since this will capture the current frame of the video. If the video is playing when percySnapshot is called, we're going to capture different states of the video. In these cases the customer should provide their own poster, which will result in the most stable screenshots anyways.

Will close #774

TODO

Before release this needs to be documented in the debugging SDKs doc as I suspect this might causing surprising results for some customers. (https://docs.percy.io/docs/debugging-sdks#videos--posters)

Capturing videos via request interception can be tricky and highly depends on the customers server. Percy's infrastructure will also not play videos for screenshots so it doesn't make too much sense to capture large resources like vidoes. This feature will capture the current frame of the videos on page and turn them into a poster image for the video. This is so there's something to display on the `<video>` element when capturing a screenshot in Percy's browsers. It's possible for this to introduce flakes since this will capture the current frame of the video. If the video is playing when `percySnapshot` is called, we're going to capture different states of the video. In these cases the custoemr should provide their own `poster`, which will result in the most stable screenshots anyways.

Turns out firefox on ubuntu can't play mpeg videos due to licensing. Swapping to a webm video makes the tests pass in CI > Note: Firefox doesn't include MPEG decoding (it's patented), so if that isn't already in your distribution, you might need to install additional software. Not sure if there are useful links here or whether a Linux user will need to jump in: Fix common audio and video issues. https://support.mozilla.org/en-US/questions/1227605#answer-1138231

wwilsman

Two suggestions

packages/dom/src/serialize-video.js

packages/dom/test/serialize-videos.test.js

wwilsman

🎮

Robdel12 added the ✨ enhancement New feature or request label Feb 24, 2022

🏗 Fix karma warning for serving non-js files

81fd8c7

Robdel12 force-pushed the rd/serialize-video-poster branch 8 times, most recently from 5e2e8bc to ed1e093 Compare February 24, 2022 21:42

Robdel12 force-pushed the rd/serialize-video-poster branch from ed1e093 to ed01402 Compare February 24, 2022 21:48

Robdel12 requested a review from wwilsman February 24, 2022 21:48

wwilsman reviewed Feb 24, 2022

View reviewed changes

packages/dom/src/serialize-video.js Outdated Show resolved Hide resolved

packages/dom/test/serialize-videos.test.js Outdated Show resolved Hide resolved

packages/dom/test/serialize-videos.test.js Outdated Show resolved Hide resolved

♻️ Peer review feedback refactoring

77e7180

Robdel12 force-pushed the rd/serialize-video-poster branch from 265d606 to 77e7180 Compare February 24, 2022 22:07

Robdel12 requested a review from wwilsman February 24, 2022 22:07

wwilsman approved these changes Feb 24, 2022

View reviewed changes

📝 Update README

c65f61d

Robdel12 merged commit 9885e8a into master Feb 25, 2022

Robdel12 deleted the rd/serialize-video-poster branch February 25, 2022 19:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ Serialize current video frame into a `poster` on the `<video>` #794

✨ Serialize current video frame into a `poster` on the `<video>` #794

Robdel12 commented Feb 24, 2022 •

edited

Loading

wwilsman left a comment

wwilsman left a comment

✨ Serialize current video frame into a poster on the <video> #794

✨ Serialize current video frame into a poster on the <video> #794

Conversation

Robdel12 commented Feb 24, 2022 • edited Loading

What is this?

TODO

wwilsman left a comment

Choose a reason for hiding this comment

wwilsman left a comment

Choose a reason for hiding this comment

✨ Serialize current video frame into a `poster` on the `<video>` #794

✨ Serialize current video frame into a `poster` on the `<video>` #794

Robdel12 commented Feb 24, 2022 •

edited

Loading